<template>
  <div class="common-layout container">
    <el-container class="container">
      <el-header class="header">
        <div class="logo">
          <img src="../assets/icon-valorant.webp" alt="">
          <span>电商后台管理系统</span>
        </div>

        <div class="user">
          <el-button @click="logout()">退出</el-button>
          <!-- <el-button @click="test()">test</el-button> -->
        </div>

      </el-header>
      <el-container>
        <el-aside class="aside">
          <el-menu 
          active-text-color="#ffd04b" 
          background-color="#545c64" 
          class="el-menu-vertical-demo"
            default-active="2" 
            text-color="#fff"
            router
            >
            <!-- v-for循环 将每个元素赋值给item，同时将元素的索引赋值给index -->
            <el-sub-menu :index="index+' '" v-for="(item,index) in menuList.menus">
              <template #title>
              <component :is="menuList.icons[item.id]"></component>
                <!-- <el-icon>
                <User/>
                </el-icon> -->
                {{ item.name }}
              </template>
                         <!-- 循环动态加载列表  详情见数据库t_menus表--> 
              <el-menu-item :index="childitem.path" v-for="childitem in item.children">
                
                {{ childitem.name }}
              </el-menu-item>
              <!-- <el-menu-item index="1-2" v-for="childItem in childitem">{{ childItem.name }}</el-menu-item> -->
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router';
  import api from '@/api/index.js'
  import { onMounted,reactive } from 'vue';

    const menuList=reactive({
      menus:[],
      icons:{
      '1':'',
      '2':'',
      '3':'',
      '4':'',
      '5':''
     }
    })
     onMounted(()=>{
         get_menu()
     })
    const router=useRouter()
    const logout=()=>{
        //退出登录只需要清除token
        sessionStorage.removeItem("token")
        //跳转回登录页面
        router.push('/login')
    }
    
    const test=()=>{
        api.test().then(res=>{
            console.log(res)
        })
    }

    const get_menu=()=>{
      api.get_menus().then(res=>{
        menuList.menus=res.data.data
    })
  }

</script>

<style>

.header {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-size: 20px;
    color: #28344E;
    height: 50px;
    width: 100%;
    font-weight: 600;
   }
  .logo {
    float: left;
    height: 50px;
    align-items: center;
    display: flex;
    justify-content: center;
   }
  .logo img {
    width: 100px;
    height: 20px;
    margin-right: 10px;
   }
  .user {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
   }
  .aside{
    width: 200px;
    background-color: #28344E;
   }
  .container{
    height: 100%;
   }
</style>